<template>
	<view class="uni_box home">
		<navbar title='答题卡' :yin="true">
		</navbar>
		<view class="content">
			<view class="kaone">
				<view class="kaitem">
					<image class="yuans" src="@/pages_subject/static/img/yuans.png" mode="" />
					<text>已回答</text>
				</view>
				<view class="kaitem">
					<image class="yuans" src="@/pages_subject/static/img/yuan.png" mode="" />
					<text>未回答</text>
				</view>
			</view>
			
			<view class="katwo">
				<view class="kkatwoitem " :class="item.is_do==1?'kactive':''" v-for="(item,index) in tilist" :key="index" @click="getka(item)">
					<view class="ktitem">
						{{ item.sort }}
					</view>
				</view>
			</view>

			<view class="jiaojuean" @click="jiaobtn">
				交卷
			</view>
		</view>

		<!-- 做题成功之后弹窗 -->
		<view class="tipop">
			<u-popup v-model="tiendshow" mode="center" :mask-close-able="false" width="80%" :closeable="false" :mask-custom-style="maskcustomstyle">
				<view class="tiendview" v-if="titype==1">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode="" @click="tiendshow=false" />
					</view>
					<view class="navview">
						<image class="tibai" src="@/pages_subject/static/img/tibai.png" mode="" />
						<image class="tizhong" src="@/pages_subject/static/img/tizhong.png" mode="" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan">交卷</view>
					</view>
				</view>
				<view class="tiendview" v-if="titype==2">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode=""  @click="tiendshow=false" />
					</view>
					<view class="navview">
						<image class="tibaitwo" src="@/pages_subject/static/img/tibai.png" mode="" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan" >确定</view>
						<view class="tibtn" @click="tiendshow=false" >取消</view>
					</view>
				</view>
				<view class="tiendview" v-if="titype==3">
					<view class="thead">
						<image class="ticha" src="@/pages_subject/static/img/ticha.png" mode=""  @click="tiendshow=false" />
					</view>
					<text class="kaomiao">{{titypetext}}</text>
					<view class="tibot">
						<view class="tibtn quedin" @click="jiaojuan">确定</view>
						<view class="tibtn" @click="tiendshow=false">取消</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:28,
				cid:'',//二级ID
				log_id:'',
				tilist:[],
				tiendshow:false,
				titype:3,//1考试时间结束 2试题未完成 3本次题目已全部答完
				titypetext:''
			}
		},
		onLoad(option) {
			this.cid = option.cid
			this.log_id = option.log_id
			this.getlog()
		},
		onShow() {
		},
		methods: {
			async getlog(){
				let res = await this.$u.api.getTopLogByZhike({
					cid:this.cid,
					log_id:this.log_id
				});
				this.tilist = res.list
			},
			async jiaobtn(){
				let resd = await this.$u.api.checkSubmitLogByZhike({
					log_id:this.log_id
				});
				console.log(resd)
				this.titype = resd.type
				this.titypetext = resd.text
				this.tiendshow = true
				// this.navrouter("/pages_subject/twoPage/TiPage/TiBaogao");
			},
			async jiaojuan(){
				//点击交卷
				let resd = await this.$u.api.addSubmitLogByZhike({
					log_id:this.log_id
				});
				this.tiendshow = false
				this.navrouter("/pages_subject/twoPage/TiPage/TiBaoDetail?log_id="+this.log_id+'&type=2');
				
			},
			getka(item){
				var params = {
					data: item
				};
				uni.navigateBack({
				delta: 1, // 返回上一级页面
				success: function (
				) {
					const pages = getCurrentPages();
					const prevPage = pages[pages.length - 2]; // 上一页面对象
					// 在上一页面中接收参数
					prevPage.setData(params);
				}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		.kaone{
			height: 96rpx;
			background-color: #eee;
			width: 100%;
			position: relative;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.kaitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 50rpx;
				.yuans{
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

			}
		}
		.katwo{
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.kkatwoitem{
				width: 25%;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.ktitem{
					width: 75rpx;
					height: 75rpx;
					background: #EEEEEE;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				
			}
			.kactive{
				.ktitem{
					background: #FD864F;
					color: #fff;
				}
				
			}
		}
		.jiaojuean{
			position: fixed;
			width: 100%;
			height: 85rpx;
			bottom: 0;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		// padding-bottom: 150rpx;
	}

	// 做题之后弹窗样式
	.tipop{
		/deep/.u-mode-center-box{
			background-color: transparent !important;
		}
		.tiendview{
			padding: 30rpx 30rpx 50rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.thead{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.ticha{
				margin-left: auto;
				width: 35rpx;
				height: 35rpx;
			}

		}
		.navview{
			display: flex;
			flex-direction: row;
			margin: 30rpx 0;
			align-items: center;
			justify-content: center;
			position: relative;

			.tibai{
				height: 150rpx;
				width: 100%;
				position: absolute;
			}
			.tibaitwo{
				height: 150rpx;
				width: 100%;
				position: relative;
			}
			.tizhong{
				width: 158rpx;
				height: 158rpx;
				position: relative;
				margin-left: 8rpx;
			}
		}
		.kaomiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			display: block;
			text-align: center;
			margin: 20rpx 0 0;
		}
		.tibot{
			margin-top: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.tibtn{
				width: 180rpx;
				margin: 0 30rpx;
				// height: 46rpx;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #eee;
				color: #333;
				font-size: 28rpx;
				font-weight: 400;
			}
			.quedin{
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				color: #fff;
			}
		}
	}
</style>
